<style lang="scss" scoped>
.target-variation-page{
    background:#fff;
    padding:10px;
    margin:auto;
    .content-title{
        font-weight:normal;
    }
}
</style>
<template>
    <div class="target-variation-page content-mask" v-loading="loading">
        <!--变异-->
         <el-card class="card-content header-content">
            <h2 class="content-title">变异：<span>{{targetVariationObject.entrezSymbol}}&nbsp;{{targetVariationObject.variantName}}</span></h2>
            <div class="block">
                <p class="block-des">{{targetVariationObject.descCh}}</p>
                <el-row>
                    <el-col :span="6">变异名称</el-col>
                    <el-col :span="6">{{targetVariationObject.entrezSymbol}}&nbsp;{{targetVariationObject.variantName}}</el-col>
                    <el-col :span="6">起始位置</el-col>
                    <el-col :span="6">{{targetVariationObject.start}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">变异类型</el-col>
                    <el-col :span="6">{{targetVariationObject.variantTypes}}</el-col>
                    <el-col :span="6">终止位置</el-col>
                    <el-col :span="6">{{targetVariationObject.stop}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">参考转录本</el-col>
                    <el-col :span="6">{{targetVariationObject.representativeTranscript}}</el-col>
                    <el-col :span="6">参考碱基</el-col>
                    <el-col :span="6">{{targetVariationObject.referenceBases}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">染色体</el-col>
                    <el-col :span="6">{{targetVariationObject.chromosome}}</el-col>
                    <el-col :span="6">突变碱基</el-col>
                    <el-col :span="6">{{targetVariationObject.variantBases}}</el-col>
                </el-row>
            </div>
        </el-card> 
        <!--临床证据-->
         <el-card class="card-content header-content">
            <p class="l-title">
                <img src="/static/image/lczj.png" />
                <span>临床证据</span>
            </p>
            <div class="block" v-if="targetEvidents.length>0">
                <el-table :data="targetEvidents" border height="500">
                    <el-table-column align="center" label="变异名称" prop="variantName"></el-table-column>
                    <el-table-column align="center" label="entrez_Symbol" prop="entrezSymbol"></el-table-column>
                    <el-table-column align="center" label="变异来源" prop="variantOrigin"></el-table-column>
                    <el-table-column align="center" label="药物" prop="drugName"></el-table-column>
                    <!-- <el-table-column align="center" label="药物" >
                        <template slot-scope="scope">
                            <a @click="goDrug(scope.row.drugId)" href="javascript:;">{{scope.row.drugName}}</a>
                        </template>
                    </el-table-column> -->
                    <el-table-column align="center" label="适应症" prop="diseaseDisplayName"></el-table-column>
                    <el-table-column align="center" label="证据等级" prop="level"></el-table-column>
                    <el-table-column align="center" label="证据类型" prop="evidenceType"></el-table-column>
                    <el-table-column align="center" label="临床意义" prop="clinicalSignificance"></el-table-column>
                    <el-table-column align="center" label="PMID" prop="pubmedId"></el-table-column>
                    <el-table-column align="center" label="详情">
                        <template slot-scope="scope">
                            <a href="javascript:;" @click="showEvidence(scope.row)">详情</a>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
             <div class="block" v-else>
                无
            </div>
            <div class="block" v-show="isEvidenceShow">
                <p class="l-title evidence-title">
                    <img src="/static/image/zjxq.png" />
                    <span>证据详情</span>
                </p>
                <div class="evidence-content">
                    <p>{{targetEvidentsObject.descEn}}</p>
                </div>
                <el-row class="el-row-evidence">
                    <el-col class="fontWeight600" :span="4">证据等级</el-col>
                    <el-col :span="4">&nbsp;{{targetEvidentsObject.level}}&nbsp;</el-col>
                    <el-col class="fontWeight600" :span="4">适应症</el-col>
                    <el-col :span="12">&nbsp;{{targetEvidentsObject.diseaseDisplayName}}&nbsp;</el-col>
                </el-row>
                <el-row class="el-row-evidence">
                    <el-col class="fontWeight600" :span="4">证据类型</el-col>
                    <el-col :span="4">&nbsp;{{targetEvidentsObject.evidenceType}}&nbsp;</el-col>
                    <el-col class="fontWeight600" :span="4">变异来源</el-col>
                    <el-col :span="12">&nbsp;{{targetEvidentsObject.variantOrigin}}&nbsp;</el-col>
                </el-row>
                <el-row class="el-row-evidence">
                    <el-col class="fontWeight600" :span="4">临床意义</el-col>
                    <el-col :span="4">&nbsp;{{targetEvidentsObject.clinicalSignificance}}&nbsp;</el-col>
                    <el-col class="fontWeight600" :span="4">参考文献</el-col>
                    <el-col :span="12">&nbsp;</el-col>
                </el-row>
                <el-row class="el-row-evidence">
                    <el-col class="fontWeight600" :span="4">药物</el-col>
                    <el-col :span="4">&nbsp;{{targetEvidentsObject.drugName}}&nbsp;</el-col>
                    <el-col class="fontWeight600" :span="4">PMID</el-col>
                    <el-col :span="12">&nbsp;{{targetEvidentsObject.pubmedId}}&nbsp;</el-col>
                </el-row>
            </div>
        </el-card> 
    </div>
</template>

<script>
import {medicine} from 'api/index.js';
export default {
    name: 'targetVariationPage',
    data(){
        return{
            id:"",
            loading:false,
            isEvidenceShow:false, //是否显示证据等级
            targetVariationObject:{},
            targetEvidents:[], //临床证据
            targetEvidentsObject:{},
        }  
    },
    methods:{
        getTargetVariation(){
            var obj={
                id:this.id
            }
            this.loading = true;
            medicine.getRsSerachById(obj).then((data)=>{
                if(data.status == 200){
                    if(data.data){
                        this.targetVariationObject = data.data;
                        this.getTargetEvidents();
                    }
                }else{
                    this.$message.error(data.msg);
                }
                this.loading = false;
            }).catch(error => {
                this.$message.error("获取靶向变异位点详情失败");
                this.loading = false
            });
        },
        //获取临床证据
        getTargetEvidents(){
            if(this.targetVariationObject.targetEvidents && this.targetVariationObject.targetEvidents.length>0){
                this.targetEvidents = this.targetVariationObject.targetEvidents;
            }else{
                this.targetEvidents = [];
            }
        },
        //显示证据详情
        showEvidence(row){
            console.log(row);
            if(row.evidenceId){
                this.isEvidenceShow = true;
                this.targetEvidentsObject = row;
            }
        },
        goDrug(id){
            this.$router.push("/drug?id="+id+"");
        },
        goDisease(id){
            this.$router.push("/disease?id="+id+"");
        }
    },
    mounted() {
        this.id = M.url().variantId ? M.url().variantId : '';
        this.getTargetVariation();
    },
}
</script>


